/**
 * 设备基本信息
 */
import React, {Component} from 'react';
import {connect} from 'dva';
import {Input, Card, Row, Col, Form} from 'antd';
import {getDeviceStatus} from '../../utils/util';
import moment from 'moment';
import stylesLess from './index.less';

const styles = {
  input: {
    display: 'inline-block',
    width: '6em'
  },
  detail: {
    width: '100%',
    minHeight: '380px',
    overflow: 'hidden'
  },
  rowContainer: {padding: '20px'},
  rowStyle: {paddingTop: '15px'},
  select: {width: '10em'},
  col: {marginTop: '1em'},
  p: {lineHeight: '28px'},
  label: {marginBottom: '5px', marginTop: '1.5em'},
  err: {
    color: '#f04134',
    position: 'absolute',
    width: '100%',
    zIndex: 1,
    left: 0,
    top: '100%',
    paddingLeft: '8px'
  }
};

class DetailInfo extends Component {

  onInputChange = e => {
    const {target: {name, value}} = e;
    this.valueChange(name, value);
  }

  valueChange(key, value) {
    this.props.dispatch({
      type: 'device/setData',
      payload: {
        [key]: value
      }
    });
  }

  renderItem(label, key, render) {
    const {device: {detailData}} = this.props;
    return (
      <Col span={8} style={styles.col}>
        <p style={styles.label}>{label}：</p>
        <p style={styles.p}>{
          detailData ? render ? render(detailData[key], detailData) : detailData[key] || <span style={{color:'#ccc'}}>暂无数据</span> : ''
        }</p>
      </Col>
    );
  }

  renderInput(label, value, key, isDisabled) {
    const {device: {detailData = {}, tempDetail: {error = {}}}} = this.props;

    return (
      <Col span={8} style={styles.col}>
        <p style={styles.label}>{label}：</p>
        {key ?
          <Input
            name={key}
            disabled={isDisabled || !detailData.canModify}
            value={value}
            onChange={this.onInputChange}
          /> : value
        }
        {error[key] ? <span style={styles.err}>{error[key]}</span> : null}
      </Col>
    );
  }
  showBigImg = () => {
    console.log('showBigImg');
  }

  renderUrl(label, key, key2, key3) {
    const {device: {detailData}} = this.props;
    return (
      <Col span={8} style={styles.col} className={stylesLess.imgBox}>
        <p style={styles.label}>{label}：</p>
        {detailData[key] ?
          <img
            src={`${detailData[key]}/${detailData[key2]}_${detailData[key3]}.jpg`}
            title="二维码"
            className={stylesLess.smallImg}
           onClick={this.showBigImg} /> : <span>暂无数据</span>
        }
        {detailData[key] ?
          <img src={`${detailData[key]}/${detailData[key2]}_${detailData[key3]}.jpg`} className={stylesLess.bigImg}/> : <span>暂无数据</span>
        }
      </Col>
    );
  }

  render() {
    const {device: {tempDetail}} = this.props;
    const {mac, name} = tempDetail;

    return (
      <Card title="设备基本详情" style={styles.detail}>
        <div style={styles.rowContainer}>
          <Form layout="vertical">
            <Row gutter={16} style={styles.rowStyle}>
              {this.renderInput('设备Mac', mac, 'mac', true)}
              {this.renderInput('设备名称', name, 'name')}

              {this.renderItem('出厂时间', 'ctime', ctime => ctime ? moment(ctime).format('YYYY-MM-DD HH:mm:ss') : '')}

              {/* {this.renderItem('设备状态', 'workStatus', getDeviceStatus)} */}
              {this.renderItem('在线状态', 'onlineStatusDesc')}
              {this.renderItem('所属产品', 'productName')}
              {this.renderItem('最后上线时间', 'lastOnlineTime', time => time ? moment(time).format('YYYY-MM-DD HH:mm:ss') : '')}
              {this.renderItem('设备序列号', 'sno')}
              {this.renderItem('用户', 'username')}
              {this.renderItem('电话', 'mobile')}
              {this.renderItem('场地名称', 'devicePlaceName')}
              {this.renderUrl('二维码', 'qrcodeUrl', 'sno', 'mac')}
            </Row>
          </Form>
        </div>
      </Card>
    );
  }
}

const Detail = Form.create()(DetailInfo);

DetailInfo.propTypes = {};

export default connect(({device}) => ({device}))(Detail);

